<!DOCTYPE html>
<html class="no-js" lang="zh_CN">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
    <title>${system_admin_title}</title>
    #required_css
    <link rel="stylesheet" href="$!basePath/app/charts/style.css">
</head>
<body>#loading

<div class="app $!layout">
    <!-- 头部菜单 -->#header
    <section class="layout">
        <!-- 菜单 -->#sidebar
        <!-- 内容主体 -->
        <section class="container">
            <section class="main-content">
                <div class="content-wrap">
                    <div class="wrapper" style="background: #CCCCCC">
                        <form action="$!basePath/bi/charts/add/2">
                            <input type="hidden" name="type">
                            <div class="row">
                                <div class="col-lg-8 col-lg-offset-2">
                                    <div class="panel">
                                        <div class="panel-heading text-center">
                                            <h4>图表类型选择（1/4）</h4>
                                        </div>
                                        <div class="panel-body">
                                            <div class="row">
                                                #foreach($!obj in $!chartsType.entrySet())
                                                <div class="col-lg-3">
                                                    <section class="panel panel-default panel-charts" data-type="$!obj.key">
                                                        <div class="panel-body">
                                                            <div class="thumb">
                                                                <img class="img-responsive" alt="Responsive image" src="$!basePath/app/charts/icon/$!{obj.key}.png">
                                                            </div>
                                                        </div>
                                                        <div class="panel-footer no-p text-center">
                                                            <h5>$!obj.value</h5>
                                                        </div>
                                                    </section>
                                                </div>
                                                #end
                                            </div>
                                        </div>
                                        <div class="panel-footer text-right">
                                            <button id="btnNext" class="btn btn-primary" disabled>下一步</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </section>
        </section>
    </section>
</div>
#required_js
<script type="text/javascript">
    $(".panel-charts").bind("click", function () {
        $(".panel-charts").removeClass("selected");
        $(this).addClass("selected");
        $("input[name='type']").val($(this).data("type"));

        $("#btnNext").removeAttr("disabled");
    });
</script>
#loading_close
</body>

</html>